<!-- eslint-disable vue/no-unused-vars -->
<template>
  <div class="zw-img-gallary">
    <div @mouseenter="removeVisible = true; activeIndex = index;" @mouseleave="removeVisible = false" class="image"
      v-for="(img, index) in images" :key="img.src">
      <el-image style="width: 100px; height: 100px" :src="img.thumbSrc" :preview-src-list="previewSrcList" fit="fill"
        show-progress :initial-index="activeIndex">
        <template #toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }">
          <el-icon @click="prev">
            <Back />
          </el-icon>
          <el-icon @click="next">
            <Right />
          </el-icon>
          <el-icon @click="setActiveItem(previewSrcList.length - 1)">
            <DArrowRight />
          </el-icon>
          <el-icon @click="actions('zoomOut')">
            <ZoomOut />
          </el-icon>
          <el-icon @click="actions('zoomIn', { enableTransition: false, zoomRate: 2 })">
            <ZoomIn />
          </el-icon>
          <el-icon @click="
            actions('clockwise', { rotateDeg: 180, enableTransition: false })
            ">
            <RefreshRight />
          </el-icon>
          <el-icon @click="actions('anticlockwise')">
            <RefreshLeft />
          </el-icon>
          <el-icon @click="reset">
            <Refresh />
          </el-icon>
          <el-icon @click="download(img.fileId)">
            <Download />
          </el-icon>
        </template>
      </el-image>
      <el-icon class="close-icon" v-if="!readonly" v-show="removeVisible" @click.stop="onImageRemove(img)">
        <CircleCloseFilled />
      </el-icon>
    </div>

    <div v-if="!readonly" class="upload-image" title="点击上传图片">
      <el-upload multiple name="files" :limit="5" :action="uploadUri" :show-file-list="false" accept="image/*"
        :on-success="uploadSuccess">
        <el-icon>
          <CirclePlus />
        </el-icon>
      </el-upload>
    </div>
    <div v-if="readonly && imageIds.length === 0" class="no-images">
      暂无数据
    </div>
  </div>
</template>
<script lang="ts" setup>
import StoreManager from '@/plugins/storage';
import ApiTree from '@/server/api-tree';
import type { RestResult } from '@/server/server-response';
import { ElMessage } from 'element-plus';
import { ref, watch } from 'vue';

const at = StoreManager.getString("access-token");
const props = defineProps<{
  readonly: boolean,
  imageIds: string[]
}>();
const emits = defineEmits(["upload", "remove"])
const uploadUri = ApiTree.file.getUploadUri();
const images = ref<{
  fileId: string,
  src: string,
  thumbSrc: string
}[]>([]);
const previewSrcList = ref<string[]>([])
const download = (fileId: string) => {
  const url = images.value.find(x => x.fileId === fileId)?.src;
  if (!url) return;
  ApiTree.file.browserDownload(fileId);
  window.open(url + "&at=" + at, "_blank");
}

const uploadSuccess = (response: RestResult<string[]>) => {
  if (response.code === 200) {
    ElMessage.success(response.msg);
    emits("upload", response.data);
  } else {
    ElMessage.error(response.msg);
  }
}
const activeIndex = ref(0);
const removeVisible = ref(false);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const onImageRemove = (img: any) => {
  emits("remove", img.fileId);
  removeVisible.value = false;
}
watch(() => props.imageIds.length, () => {
  previewSrcList.value = [];
  images.value = props.imageIds.map(x => {
    const src = ApiTree.file.buildDownloadUri(x);
    previewSrcList.value.push(src)
    return {
      fileId: x,
      src: src,
      thumbSrc: src
    }
  })

}, { immediate: true })
</script>
<style lang="scss" scope>
.zw-img-gallary {
  display: flex;
  flex-direction: row;
  // align-items: center;
  justify-content: center;

  .image {
    width: 110px;
    height: 110px;
    border-radius: 5px;
    margin: 0 8px;
    border: 2px solid v.$border-color;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .close-icon {
      position: absolute;
      top: -8px;
      right: -8px;
      cursor: pointer;
      font-size: 16px;
      color: rgb(225, 56, 56);
    }
  }

  .upload-image {
    border-radius: 5px;
    width: 110px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid v.$border-color;
    font-size: 24px;
    font-weight: 600;
  }

  .no-images {
    border-radius: 5px;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid v.$border-color;
  }
}
</style>
